<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>


    <!-- v-bind： ==  ： -->
    <img width="100px" height="100px" v-bind:src="imgUrl"/>
    <img width="100px" height="100px" :src="imgUrl"/>

    <!-- 执行事件的写法 -->
    <button v-on:click="run1">执行事件的第一种方法</button>   
    <button @click="run2">执行事件的第二种方法</button>  
    <button @click="run3">执行事件的第二种方法</button>  

    <button @click="getMessage">获取data里面的值</button>  

    <button @click="setMessage">set data里面的值</button>  


    <hr/>  
    <button @click="requestData">请求数据</button>
    <ul v-for="(item,key) in list">
      <li>{{key}} -- {{item}}</li>
    </ul>

    <hr/>  
    <button @click="deleteData('111')">执行方法传值</button>

    <hr/> 
    获取自定义属性(必须data-开头，属性在e.srcElement.dataset中) 
    <button data-did="ht.yu"  @click="eventFuntion($event)">事件对象</button>



  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "欢迎来到vue.js",
      imgUrl:
        "http://pic112.nipic.com/file/20161014/24090163_165947459034_2.jpg",
      list: [1, 2, 3]
    };
  },
  methods: {
    run1: function() {
      alert("你好第一个按钮");
    },
    run2: function() {
      alert("你好第二个按钮");
    },

    run3() {
      alert("你好第三个按钮");
    },
    getMessage() {
      return alert(this.msg);
    },
    setMessage() {
      this.msg = "欢迎再次来到vue.js";
    },
    requestData() {
      for (let i = 0; i < 10; i++) {
        this.list.push("set:" + i + ".");
      }
    },
    deleteData(val) { 
      alert(val);
    },
    eventFuntion(e) {
      //改变当前dom节点背景颜色
      console.log(e);
      e.srcElement.style.background = "red";
      // 获取自定义属性的值
      alert(e.srcElement.dataset.did);
    }
  }
};
</script>

<style lang="scss">
</style>
